<template>
  <div :class="['left_tool_box', { left_hide: !show }]">
    <div id="stencil" :style="`width:${toolbarWidth}px`"></div>
    <FoldBtn v-model:show="show"/>
  </div>
</template>

<script lang="ts" setup>
import {toolbarWidth} from '../config/index';
import FoldBtn from '../components/FoldBtn.vue';
import {FlowGraph} from '../common/FlowGraph';
import {defineComponent, reactive, onMounted, ref} from 'vue';
import {createStencilTool} from '../common/Stencil/createStencilTool';
import {stepStencilTool} from '../common/Stencil/stepStencilTool';

// const props = defineProps({
//   graphType: {
//     type: String,
//     default: ''
//   }
// })

const show = ref(true)

onMounted(() => {
  // if(props.graphType == 'tree') {
  const stencil = createStencilTool(FlowGraph.graph);
  const stencilContainer = document.getElementById('stencil')!;
  stencilContainer.appendChild(stencil.container);
  // } else if(props.graphType == 'step') {
  //   const stencil = stepStencilTool(FlowGraph.graph);
  //   const stencilContainer = document.getElementById('stencil')!;
  //   stencilContainer.appendChild(stencil.container);
  // }
});
/**模板工具组件 */
</script>

<style lang="scss" scoped>
.left_tool_box {
  height: calc(100% - 40px);
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 100;
  transition: 0.4s;
  box-sizing: border-box;
  border-right: 1px solid #d9d9d9;
}

.left_hide {
  left: -280px;
  transition: 0.4s;
}
</style>
